<sqx-title message="i18n:common.contributors" />
<sqx-layout innerWidth="55" layout="main" titleIcon="contributors" titleText="i18n:common.contributors">
    <ng-container menu>
        <sqx-notifo topic="apps/{{ contributorsState.appId }}/settings/contributors" />
        <button class="btn btn-text-secondary me-2" (click)="reload()" shortcut="CTRL + B" title="i18n:contributors.refreshTooltip" type="button">
            <i class="icon-reset"></i> {{ "common.refresh" | sqxTranslate }}
        </button>
        <div class="form-inline">
            <input
                class="form-control"
                [ngModel]="contributorsState.query | async"
                (ngModelChange)="search($event)"
                placeholder="{{ 'contributors.search' | sqxTranslate }}"
                shortcut="CTRL + I"
                shortcutAction="focus" />
        </div>
    </ng-container>
    <ng-container>
        <sqx-list-view innerWidth="55rem" [isLoading]="contributorsState.isLoading | async">
            <ng-container>
                @if (rolesState.roles | async; as roles) {
                    @if (contributorsState.maxContributors | async; as maxContributors) {
                        @if (maxContributors > 0) {
                            <div class="alert alert-success mb-4">
                                {{ "contributors.planHint" | sqxTranslate: { maxContributors: maxContributors } }}
                            </div>
                        }
                    }

                    @if (contributorsState.canCreate | async) {
                        <sqx-contributor-add-form [roles]="roles" />
                    }
                }

                @if ((contributorsState.isLoaded | async) && (contributorsState.contributorsFiltered | async); as contributors) {
                    @if (rolesState.roles | async; as roles) {
                        @if (contributors.length === 0) {
                            <div class="table-items-row table-items-row-summary table-items-row-empty">
                                {{ "contributors.empty" | sqxTranslate }}
                            </div>
                        }

                        <table class="table table-items table-fixed">
                            @for (contributor of contributors; track contributor.contributorId) {
                                <tbody [roles]="roles" [search]="contributorsState.queryRegex | async" [sqxContributor]="contributor"></tbody>
                            }
                        </table>
                    }
                }
            </ng-container>
            <ng-container footer>
                <sqx-pager [paging]="contributorsState.paging | async" (pagingChange)="contributorsState.page($event)" />
            </ng-container>
        </sqx-list-view>
    </ng-container>
    <ng-template sidebarMenu>
        <div class="panel-nav">
            <a
                class="panel-link"
                attr.aria-label="{{ 'common.history' | sqxTranslate }}"
                queryParamsHandling="preserve"
                replaceUrl="true"
                routerLink="history"
                routerLinkActive="active"
                sqxTourStep="help"
                title="i18n:common.history"
                titlePosition="left">
                <i class="icon-time"></i>
            </a>
            <a
                class="panel-link"
                attr.aria-label="{{ 'common.help' | sqxTranslate }}"
                queryParamsHandling="preserve"
                replaceUrl="true"
                routerLink="help"
                routerLinkActive="active"
                sqxTourStep="help"
                title="i18n:common.help"
                titlePosition="left">
                <i class="icon-help2"></i>
            </a>
        </div>
    </ng-template>
</sqx-layout>
<router-outlet></router-outlet>
